<template>
  <div @click="jump(item.seconds, item.checkResultList)" class="imageShot">
    <div class="img-wrapper" :id="item.imgPath" :style="{ backgroundImage: 'url(' + item.imgPath + ')' }">
      <span v-if="showSec" class="timeSt">{{ getPlayTime(item.seconds) }}</span>
      <!-- <span class="isOcr" v-if="item.checkResultList">文</span> -->
      <img v-if="item.type == 'ocr'" class="isOcr" src="@/assets/img/ocr.png" />
    </div>
  </div>
</template>

<script>
import { getPlayTime } from '@/utils/util.js';
export default {
  name: 'ErrImage',
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: 1
    },
    showSec: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {};
  },
  created() {},
  methods: {
    getPlayTime,
    jump(seconds, ocr) {
      // console.log(seconds);
      // console.log(ocr);
      console.log(this.item);
      this.$emit('play', { seconds, ocr, item: this.item });
      this.toErrImg(this.index);
    },
    toErrImg(index) {
      console.log(index);
      this.$emit('checkCard', index);
      //图片地址为imgPath
      let anchor = document.getElementById(this.item.imgPath);
      console.log(this.item.imgPath);
      console.log(anchor);
      if (anchor) {
        anchor.scrollIntoView();
      }
      let activeWord = document.getElementsByClassName('wordActive');
      if (Array.from(activeWord).length) {
        activeWord[0].style.backgroundColor = '#fff';
        activeWord[0].classList.remove('wordActive');
      }
      anchor.classList.add('wordActive');
      anchor.style.backgroundColor = '#3aa8fe';
    }
  }
};
</script>

<style scoped lang="less">
.imageShot {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 23%;
  border-radius: 4px;
  .img-wrapper {
    width: 100%;
    height: 90px;
    position: relative;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    cursor: pointer;

    .timeSt {
      background: rgba(33, 32, 32, 0.32);
      border-radius: 4px;
      padding: 2px 11px;
      color: #fff;
    }
    .isOcr {
      width: 22px;
      height: 22px;
      // line-height: 26px;
      // text-align: center;
      position: absolute;
      right: 10px;
      top: 6px;
      // background-color: #1A74D9;
      // border-radius: 50%;
      // box-sizing: border-box;
      // color: #fff;
    }
  }
}
</style>
